<template>
  <div id="jichuzhexiantu2" ref="chartRef" style="width: 100%; height: 100%;"></div>
</template>
<script setup lang="ts">
import * as echarts from "echarts";
// 获取深色模式全局状态
import {storeVuex} from '@/store/modules/user'
import {storeToRefs} from "pinia";
import {onMounted, reactive, watch} from "vue";
import {order} from "@/api";
//storeToRefs设置为响应式状态
const isDarkMode = storeToRefs(storeVuex())
let myChart:any = null; // 存储 ECharts 实例
const initChart = ()=>{
  const chartDom = document.getElementById('jichuzhexiantu2');
  // 如果 myChart 已经初始化了，则先销毁
  if (myChart) {
    myChart.dispose();
  }
  myChart = echarts.init(chartDom, isDarkMode.isDarkMode.value ? 'dark' : 'light');
  let option = {
    title: {
      text: '',
      textStyle: {
        fontSize: 25,
        fontWeight: 'normal'
      },
      x: 'center'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: { // 坐标轴指示器，坐标轴触发有效
        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    grid: {
      left: '2%',
      right: '4%',
      bottom: '14%',
      top:'16%',
      containLabel: true
    },
    legend: {
      data: ['', ''],
      right: 10,
      top:12,
      textStyle: {
        color: "#fff"
      },
      itemWidth: 12,
      itemHeight: 10,
      // itemGap: 35
    },
    xAxis: {
      type: 'category',
      data: listData.map(item => item.name),
      axisLabel: {
        textStyle: {
          fontFamily: 'Microsoft YaHei'
        }
      },
    },
    yAxis: {
      type: 'value',
      axisLine: {
        show: false,
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255,255,255,0.3)'
        }
      },
      axisLabel: {}
    },
    series: [
      {
        name: '销售量 (元)',
        type: 'bar',
        barWidth: '40%',
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#FD6585'
            }, {
              offset: 1,
              color: '#0D25B9'
            }]),
            barBorderRadius: 10,
          },
        },
        data: listData.map(item => item.value)
      }
    ]
  };
  myChart.setOption(option);
}
// 监听echarts的深色模式 主题变化
// watch(() => isDarkMode.isDarkMode.value, () => {
//   initChart(); // 重新初始化图表
// });
watch(
    [
      () => isDarkMode.isDarkMode.value,
      () => isDarkMode.isEcharts.value
    ],
    ([newDarkMode, newEchartsStatus]) => {
      // 如果深色模式变化
      if (newDarkMode !== undefined) {
        initChart(); // 重新初始化图表
      }
      // 如果导航栏隐藏状态变化
      if (newEchartsStatus !== undefined) {
        setTimeout(() => {
          updatewidth(); // 调整图表大小
        }, 1000);
      }
    }
);
let listData = reactive([])
let userStore = storeVuex();
const getSaleData = async ()=>{
  const res= await order.getOrderData({
    shop_id:userStore.userType_id
  })
  listData = res.data.data.data.echartsData
  console.log(11111,listData)
  initChart();
}
onMounted(() => {
  getSaleData();
  window.addEventListener('resize', updatewidth)
});
const updatewidth = ()=>{
  myChart.resize();
}
</script>
<style scoped>

</style>
